<template>
  <div>
    <van-sticky >
    <van-row>
      <van-col span="22"><van-search value="{{ value }}" shape="round" placeholder="请输入搜索关键词" /></van-col>
      <van-col span="2"><van-icon name="chat-o" class="icon1" /></van-col>
    </van-row>
  </van-sticky >
    <div class="HotSellContent">
      <div class="HotSellContent-1" >

        <van-tree-select v-model:main-active-index="activeIndex" height="100vh" :items="items"
          :v-if="activeIndex === 1">
          <template #content>
            <div class="HotSellContent-2">
              <!-- 
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe> -->
        <!-- <van-sticky :offset-top="54"> -->
              <van-nav-bar left-text="全部商品">
                <template #right>
                  <van-icon name="ellipsis" size="20" @click="$router.push('/Allshop')" />

                </template>
              </van-nav-bar>
            <!-- </van-sticky> -->
              <div id="box">
                <div class="box1" @click="$router.push('/ShopDetail')" v-for="item in shops" :key="item.goods_id">
                  <img src="@/assets/tabs/exhibition1.jpg" alt="" />
                  <div class="box2">
                    <span>{{ item.goods_name }}</span>
                    <span class="span2">{{ item.description }}</span>
                    <div>
                      <span>¥ {{ item.show_price }}</span>
                      <span>已售 {{ item.sales_volume }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- BackTop 回到顶部 -->
              
            </div>
          </template>
          <van-back-top style="margin-bottom: 50px" />
        </van-tree-select>
        
      </div>      
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import httpApi from '@/http'
import Shop from '@/types/Shop'

// 获取商品信息
const shops = reactive<Shop[]>([])
onMounted(() => {
  httpApi.commodityApi.queryAll().then(res => {
    console.log('全部商品', res);
    let shop: Shop[] = res.data.data
    shops.push(...shop)


  })
})
//获取分类信息
const FL = reactive<Shop[]>([])
onMounted(() => {
  httpApi.commodityApi.queryFl().then(res => {
    console.log('全部分类', res);
    let fl: Shop[] = res.data.data
    FL.push(...fl)
  })
})
const activeIndex = ref(0);

const pno = ref(1)
// const onLoad = () => {
//   let params = { pno: pno.value++, pageSize: 8 }
//   httpApi.commodityApi.queryPagingAll(params).then(res => {
//     console.log('全部商品', res)
//     let shop: Shop[] = res.data.data
//     shops.push(...shop)
//     console.log('shops', shops)
//     loading.value = false

//     console.log('结束', shops.length)
//     // 数据全部加载完成
//     if (shop.length === 0) {
//       finished.value = true
//       return
//     }
//   })

//   console.log('到底了，加载下一页。。。')
// }

const items = [{ text: '林家罐头' }, { text: '林家肉脯' }, { text: '林家坚果' }, { text: '林家果脯' }, { text: '林家零食' }]


</script>

<style scoped lang="scss">
.van-icon {
  font: 24px/1 vant-icon;
  margin-top: 10px;
}

// .HotSellContent {
//   display: flex;
//   flex-direction: row;
// }

// .HotSellContent-1 {
//   width: calc(100% / 3);
// }

// .van-sidebar {
//   width: calc(100%);
// }

// .HotSellContent-2 {
//   width: calc(100% * 2 / 3);
//   background-color: #fff;
// }

:deep(.van-nav-bar__content) {
  height: 50px;
  background-color: #fff;
  color: black;
  --van-nav-bar-text-color: black;
  --van-nav-bar-icon-color: black;
}

:deep(.van-nav-bar__text) {
  color: black;
  font-size: 14px;
  font-weight: lighter;
}

:deep(.van-tab__panel) {

  width: 50%;
}

#box {


  .box1 {
    display: flex;
    margin-bottom: 10px;
  }

  img {
    width: calc(100% / 3);
  }

  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;

    >span:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      -webkit-line-clamp: 2; //显示的行数
      font-size: 14px;
    }

    >.span2 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      -webkit-line-clamp: 1; //显示的行数
      font-size: 2px;

      color: burlywood;
    }

    >div {
      :first-child {
        font-weight: bold;
        color: palevioletred;
      }

      :last-child {
        margin-left: 10px;
        font-weight: lighter;
        font-size: 12px;
      }
    }

  }
}



// .van-swipe {
//   margin: 15px;

//   img {
//     width: 100%;
//     height: 120px;
//   }
// }
</style>